<!DOCTYPE html>
<html>
    <head>
        <meta>
        <title>诛仙3</title>
    </head>
    <body>
        <div id="app">{{userName}}
            <p v-text="userName"></p>
            <p v-text="gender">性别</p>
            <p>姓名：{{userName}}</p>
            <p>性别：{{gender}}</p>
            <p v-html="description"></p>
            <input type="text" v-bind:placeholder="inputValue">
            <input type="text" :placeholder="inputValue">
            <br>
            <img v-bind:src="imgSrc" alt="">
            <img :src="imgSrc" alt="">
            <h3>count的值为{{count}}</h3>
            <button v-on:click="addCount">+1</button>
            <button @click="addCount2(2,$event)">+2</button>
        </div>
        
        <script src="/lib/vue.js"></script>
        <script>
            const vm = new Vue({
                //指定vue实例控制页面的哪个区域
                el:'#app',
                //指定数据源
                data:{
                    userName:'shuqingle',
                    gender:'男',
                    description:'<h5 style="color:red;">盒马程序员</h5>',
                    inputValue:'请输入内容',
                    imgSrc:'https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/%DF%FD%DF%FD%C4%EE%B5%C4%DF%F7%DF%F7/pic/item/411fbad7912397dd4706019f5982b2b7d1a287d2.jpg',
                    count:0
                },
                methods:{
                    addCount(e){
                        const nowBgColor = e.target.style.backgroundColor;
                        e.target.style.backgroundColor = nowBgColor==='red'?'blue':'red';
                        this.count++;
                    },
                    addCount2(step,e){
                        const nowBgColor = e.target.style.backgroundColor;
                        e.target.style.backgroundColor = nowBgColor==='red'?'':'red';
                        this.count = this.count+step;
                    }
                }
            })
        </script>
    </body>
</html>